<template>
  <Modal :mask-closable="false" v-model="visible" :title="title">
    <Form
        ref="form"
        v-if="visible"
        class="form-container formList"
        :model="form"
        label-position="top"
        :rules="rules"
    >
      <Row :gutter="16">
        <Col span="24">
          <FormItem
              label="仓位编码"
              required
              prop="warehouseId"
              class="custom-form-item"
          >
            <Select v-model="form.warehouseId" clearable>
              <Option
                  v-for="item of warehouseList"
                  :value="item.value"
                  :key="item.value"
              >{{ item.label }}
              </Option
              >
            </Select>
          </FormItem
          >
        </Col>
        <Col span="24">
          <FormItem
              label="储位编码"
              required
              prop="storageCode"
              class="custom-form-item"
          >
            <Input
                type="text"
                v-model="form.storageCode"
                placeholder="请输入储位编码"
                class="inputBorder"
            ></Input>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem
              label="储位名称"
              required
              prop="storageName"
              class="custom-form-item"
          >
            <Input
                type="text"
                v-model="form.storageName"
                placeholder="请输入储位名称"
                class="inputBorder"
            ></Input>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem
              label="储位类型"
              required
              prop="storageType"
              class="custom-form-item"
          >
            <Input
                type="text"
                v-model="form.storageType"
                placeholder="请输入储位类型"
                class="inputBorder"
            ></Input></FormItem
          >
        </Col>
        <Col span="24">
          <FormItem
              label="是否冻结"
              required
              prop="storageFrozen"
              class="custom-form-item"
          >
            <Select v-model="form.storageFrozen" clearable>
              <Option
                  v-for="item of typeList"
                  :value="item.value"
                  :key="item.value"
              >{{ item.label }}
              </Option
              >
            </Select>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div slot="footer" v-if="visible">
      <Button type="default" @click="closeModal">取消</Button>
      <Button type="primary" @click="handleSubmit('form')">确定</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "CreateOrUpdateModalS",
  props: {
    visible: Boolean,
    form: Object,
    title: String,
    handleAddSubmit: Function,
    typeList: Array,
    closeSubmit: Function,
    warehouseList: Array
  },
  data() {
    return {
      rules: {
        storageCode: [
          {required: true, message: "请输入储位编码", trigger: "blur"},
        ],
        warehouseId: [
          {required: true, message: "请选择仓位", trigger: "blur"},
        ],
        storageName: [
          {required: true, message: "请输入储位名称", trigger: "blur"},
        ],
        storageType: [
          {required: true, message: "请输入储位类型", trigger: "blur"},
        ],
        storageFrozen: [
          {required: true, message: "请选择是否冻结", trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    closeModal() {
      this.closeSubmit();
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleAddSubmit(formName);
        }
      });
    },
  },
};
</script>

<style scoped>
.form-container {
  flex-wrap: wrap; /* 允许子项换行 */
  justify-content: space-between; /* 子项之间的间隔 */
}

.form-container .form-item {
  flex: 1 0 48%; /* 每个表单项占据48%的宽度，剩余空间由space-between处理 */
  margin-bottom: 20px; /* 根据需要调整 */
}

/* 如果需要处理响应式布局，可以添加媒体查询 */
@media (max-width: 768px) {
  .form-container .form-item {
    flex: 1 0 100%; /* 在小屏幕上，每个表单项占据整行 */
  }

  .custom-form-item {
    width: 200px;
  }
}

/* 注意：由于Element UI的FormItem没有直接的.form-item类，你可能需要自定义或检查实际应用的类名 */
</style>
